<template>
  <el-row>
    <el-col :span="24">
      <div class="un-handle-layout">
        <el-row>
          <h2 class="row__title" style="margin-left: 40px; justify-content: flex-start;margin-top: 30px">工作台</h2>
        </el-row>
        <el-row>
          <el-col :span="2">
            <el-avatar v-if="userInfo.avatar" :src='"https://seedling-classmate.oss-cn-beijing.aliyuncs.com/"+userInfo.avatar'
                       style="margin-top: 20px;margin-left: 35px;margin-bottom: 30px;width: 70px;height: 70px"/>
            <el-avatar v-else class="avatar-box" style="margin-top: 20px;margin-left: 35px;margin-bottom: 30px"/>
          </el-col>
          <el-col :span="10">
            <h2 class="row__text__large" style="margin-left:25px; justify-content: flex-start;margin-top: 25px">早上好，广告主，今天是星期二，天气晴朗</h2>
            <h3 class="row__text__small" style="margin-left:25px; justify-content: flex-start;margin-top: 15px">广告主（茶百道） | 新苗同学迎新平台</h3>
          </el-col>
          <el-col :span="5">
          </el-col>
          <el-col :span="7">
            <el-row>
              <div>
                <h3 class="row__text__small" style="justify-content: flex-start;margin-top: 35px">当前发布广告</h3>
                <h2 class="row__text__plus" style="margin-left:18px; justify-content: flex-start;margin-top: 5px">16</h2>
              </div>
              <div class="vertical-line" style="margin-top: 30px"></div>
              <div>
                <h3 class="row__text__small" style="justify-content: flex-start;margin-top: 35px">审核通过广告</h3>
                <h2 class="row__text__plus" style="margin-left:18px; justify-content: flex-start;margin-top: 5px">14</h2>
              </div>
              <div class="vertical-line" style="margin-top: 30px"></div>
              <div>
                <h3 class="row__text__small" style="justify-content: flex-start;margin-top: 35px">当前发布优惠券</h3>
                <h2 class="row__text__plus" style="margin-left:24px; justify-content: flex-start;margin-top: 5px">526</h2>
              </div>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-top: 20px">
    <el-col :span="17">
      <!--数据显示-->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="un-handle-layout">
            <el-row>
              <h2 class="row__text__small" style="margin-left: 30px; justify-content: flex-start;margin-top: 20px">今日广告点击率</h2>
            </el-row>
            <el-row>
              <h2 class="row__text__max" style="margin-left:33px; justify-content: flex-start;margin-top: 10px">87%</h2>
            </el-row>
            <el-row style="margin-top: 12px;">
              <img :src="increase" style="margin-left: 30px;width: 15px;height: 15px;margin-bottom: 20px;margin-top: 1px">
              <h2 class="row__text__small__green" style="margin-left: 6px; justify-content: flex-start;">+5.34%</h2>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="un-handle-layout">
            <el-row>
              <h2 class="row__text__small" style="margin-left: 30px; justify-content: flex-start;margin-top: 20px">今日广告点击次数</h2>
            </el-row>
            <el-row>
              <h2 class="row__text__max" style="margin-left:33px; justify-content: flex-start;margin-top: 10px">2753</h2>
            </el-row>
            <el-row style="margin-top: 12px;">
              <img :src="increase" style="margin-left: 30px;width: 15px;height: 15px;margin-bottom: 20px;margin-top: 1px">
              <h2 class="row__text__small__green" style="margin-left: 6px; justify-content: flex-start;">+11.46%</h2>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="un-handle-layout">
            <el-row>
              <h2 class="row__text__small" style="margin-left: 30px; justify-content: flex-start;margin-top: 20px">今日支出</h2>
            </el-row>
            <el-row>
              <h2 class="row__text__max" style="margin-left:33px; justify-content: flex-start;margin-top: 10px">344.12</h2>
            </el-row>
            <el-row style="margin-top: 12px;">
              <img :src="increase" style="margin-left: 30px;width: 15px;height: 15px;margin-bottom: 20px;margin-top: 1px">
              <h2 class="row__text__small__green" style="margin-left: 6px; justify-content: flex-start;">+8.33%</h2>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <!--收入监控-->
      <div class="un-handle-layout" style="margin-top: 20px">
        <div class="title-style">支出监控</div>
        <el-row>
          <div id="incomeLine" style="width:70%;height:320px"></div>
          <div style="width:30%;height:320px">
            <div style="width: 95%">
              <el-row :gutter="10">
                <el-col :span="12">
                  <div class="un-handle-layout_pie" style="margin-top: 15px">
                    <el-row>
                      <h2 class="row__text__small" style="margin-left: 10px; justify-content: flex-start;margin-top: 15px">累计支出</h2>
                    </el-row>
                    <el-row>
                      <h2 class="row__text__large" style="margin-left:5px; justify-content: flex-start;margin-top: 5px">￥1835.52</h2>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="un-handle-layout_pie" style="margin-top: 15px">
                    <el-row>
                      <h2 class="row__text__small" style="margin-left: 10px; justify-content: flex-start;margin-top: 15px">今日支出</h2>
                    </el-row>
                    <el-row>
                      <h2 class="row__text__large" style="margin-left:5px; justify-content: flex-start;margin-top: 5px">￥102.22</h2>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div id="incomePie" style="width:100%;height:260px;margin-top: -30px"/>
          </div>
        </el-row>
      </div>
    </el-col>
    <el-col :span="7">
      <!--便捷导航-->
      <div class="un-handle-layout-green">
        <div class="title-style-white">便捷导航</div>
        <div>
          <el-row>
            <el-col :span="8">
              <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">我的钱包</h2>
            </el-col>
            <el-col :span="8">
              <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">个人中心</h2>
            </el-col>
            <el-col :span="8">
              <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">优惠券监控</h2>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">优惠券核销</h2>
            </el-col>
            <el-col :span="8">
              <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">创建广告</h2>
            </el-col>
            <el-col :span="8">
              <h2 class="row__text__green" style="justify-content: center;margin-top: 15px;margin-bottom: 20px">+ 添加</h2>
            </el-col>
          </el-row>
        </div>
      </div>
      <!--学生检索关键词-->
      <div class="un-handle-layout" style="margin-top: 20px">
        <div class="title-style">学生检索关键词</div>
        <div id="selectRank" style="width:100%;height:305px;margin-bottom: 20px"></div>
      </div>
    </el-col>
  </el-row>

</template>

<script>
import increase from "@/assets/home/increase.png"
import decrease from "@/assets/home/decrease.png"
import * as echarts from 'echarts'
import {ElMessage} from "element-plus";
export default{
  name: "HomeComponent",
  data() {
    return {
      increase:increase,
      decrease:decrease,
      userInfo:{
      },
      acrossData : [
        { name: '数学科学学院', value: 98 },
        { name: '物理科学与技术学院', value: 96 },
        { name: '化学与化工学院', value: 95 },
        { name: '人工智能学院', value: 95 },
        { name: '人文学院', value: 91 },
        { name: '控制科学与工程学院', value: 90 },
        { name: '机械工程学院', value: 90 },
        { name: '材料科学与工程学院', value: 89 },
        { name: '法学院', value: 89 },
        { name: '物理科学与技术学院', value: 88 },
        { name: '环境科学与工程学院', value: 86 },
        { name: '生命科学学院', value: 85 },
        { name: '电子与信息工程学院', value: 84 },
        { name: '电气工程学院', value: 82 },
        { name: '知识产权学院', value: 79 },
        { name: '纺织科学与工程学院', value: 77 },
        { name: '经济与管理学院', value: 76 },
        { name: '航天航空学院', value: 76 },
        { name: '艺术学院', value: 75},
        { name: '药学院', value: 74 },
        { name: '计算机科学与技术学院', value: 72 },
        { name: '软件学院', value: 72 },
        { name: '马克思主义学院', value: 70 }
      ]
    }

  },
  methods: {
    getUserInfo() {
      this.axios.post('/userLoginController/getUserInfo').then(res => {
        if(res.status === 200) {
          this.userInfo=res.data.data;
          console.log("获取用户信息：",this.userInfo)
        }
        else {
          ElMessage.warning('error')
        }
      })
    },
    initIncomeLine() {
      this.charts = echarts.init(document.getElementById('incomeLine'))
      var captions = ['2024-8-30', '2024-8-31', '2024-9-1', '2024-9-2', '2024-9-3', '2024-9-4', '2024-9-5'];
      var values = ['122', '86', '109', '143', '121', '137', '102'];

      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // type: 'none',
            lineStyle: {
              color: "#7ecf6a",
            },
          },
          formatter: params => {
            console.log(params)
            const {
              name,
              data,
            } = params[0];
            return `
            <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</span>
            <sapn style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">：${data} 元</span>
         `
          },
          extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
        },
        grid: {
          top: '10%',//上边距
          right: '20',//右边距
          left: '20',//左边距
          bottom: '10%',//下边距
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: captions,
          axisTick: {
            show: false //隐藏X轴刻度
          },
          axisLine: {
            lineStyle: {
              color: "#CCCCCC"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
              fontSize: 11,
              fontFamily: 'Source Han Sans CN-Regular',
            }
          },
        },
        yAxis: [{
          type: 'value',
          name: "",
          nameTextStyle: {
            color: 'rgba(0,0,0,0.65)',
            fontSize: 12,
            fontFamily: 'Source Han Sans CN-Regular',
            align: "left",
            verticalAlign: "center",
          },
          axisLabel: {
            color: 'rgba(0,0,0,0.65)',
            textStyle: {
              fontSize: 12
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(223, 223, 223, 1)',
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(223, 223, 223, 1)',
              type: "dashed",
            }
          }
        }],
        series: [{
          type: 'line',
          data: values,
          symbolSize: 8, //标记的大小
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(126, 207, 106,0.15)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(126, 207, 106,0)' // 100% 处的颜色
            }], false),
          },
          itemStyle: {
            //折线拐点标志的样式
            color: "#7ecf6a",
            borderColor: "#7ecf6a",
            borderWidth: 5,
          },
          smooth: 0.4,
          emphasis: {
            scale: 1.5
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    },
    initIncomePie() {
      this.charts = echarts.init(document.getElementById('incomePie'))
      var option = {
        color: ['#7ecf6a','#ccdc50'],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'horizontal',
          data:['开屏广告','底部广告'],
          bottom: 20,
          itemWidth: 20,
          itemHeight: 10,
          itemGap: 10
        },
        series: [
          {
            type:'pie',
            selectedMode: 'single',
            radius: [0, '50%'],

            label: {
              normal: {
                position: 'inner',
                textStyle: {
                  color: '#ffffff' // 设置标签文字的颜色
                }
              }
            },
            data:[
              {value:5643, name:'开屏广告'},
              {value:3242, name:'底部广告'},
            ]
          },

        ]
      };


      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    },
    initSelectRank() {
      this.charts = echarts.init(document.getElementById('selectRank'))
      /* 数据 */
      let nameList = ["考研", "奶茶", "外卖推荐", "高等数学", "蓝桥杯", "四六级", "数学建模", "论文", "在问", "蜜雪冰城", "瑞幸", "C语言", "java", "python"];
      let valueList = [1000, 100, 90, 80, 70, 360, 50, 40, 30, 20, 10, 350, 80, 30];

      /* 整合 */
      //     let maxNum = Math.max(valueList); // 最大值
// 样式
      let maxColor = "#2c734c"; // 最大值颜色
      let maxFontSize = 20; // 最大值字号
      let colorList = ['#2c734c', '#539e73', '#6ecc8e', '#cde460', '#d3dc83']; // 颜色系列
      let fontSizeList = [16, 14, 12, 10]; // 字号系列
      let data = [];
// 添加数据
      data.push({
        name: nameList[0],
        value: valueList[0],
        label: {
          color: maxColor,
          fontSize: maxFontSize
        },
      })
// 数组四等分
      let currentIndex = 0;
      for (let i = 1; i < nameList.length; i += Math.floor(nameList.length / 4)) {
        for (let j = i; j < i + Math.floor(nameList.length / 4); j++) {
          data.push({
            name: nameList[j],
            value: valueList[j],
            label: {
              color: colorList[currentIndex],
              fontSize: fontSizeList[currentIndex]
            }
          })
        }
        currentIndex++;
      }

      /* 函数 */
      // 数字分割：1653 => 1,653
      const formatNum = (value) => {
        if(!value&&value!==0) return 0;
        let str = value.toString();
        let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        return str.replace(reg,"$1,");
      }

      var option = {
        color: colorList,
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none'
          },
          position: function (point, params, dom, rect, size) { // 提示框位置
            let x = 0;
            let y = 0;
            //提示框定位
            if (point[0] + size.contentSize[0] < size.viewSize[0]) {
              x = point[0]
            } else if (point[0] > size.contentSize[0]) {
              x = point[0] - size.contentSize[0]
            } else {
              x = "30%"
            }
            if (point[1] > size.contentSize[1]) {
              y = point[1] - size.contentSize[1]
            } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
              y = point[1]
            } else {
              y = "30%"
            }
            return [x, y];
          },
          formatter: params => {
            let pieColor = params.data.label["color"];
            return `
            <div style="position:relative;">
               <div style="width: 9px;height: 9px;background: ${pieColor};border: 1px solid #FFFFFF;position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
               <span style="margin:0 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 400;color: #FFFFFF;">${params.name}</span>
            </div>
            <div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${formatNum(params.value)}人</div>
         `
          },
          extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: 35, // 斥力
              gravity: 0.05,
              edgeLength: [10, 60],
              layoutAnimation: false, // 不展示牵引动画
            },
            roam: false,
            symbol: '',
            symbolSize: 0,
            label: {
              show: true,
              color: 'auto',
            },
            draggable: false,
            itemStyle: {
              color: "rgba(225,225,225,0)"
            },
            data: data
          }
        ]
      }


      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    },
  },
  mounted() {
    this.getUserInfo();
    this.initIncomeLine();
    this.initIncomePie();
    this.initSelectRank();
  }
}
</script>
<style scoped lang="scss">
.un-handle-layout {
  background: #FFFFFF;
}

.un-handle-layout_pie {
  background: #f8f8f8;
  height: 70px;
  border-radius: 10px; /* 设置圆角为10像素 */
}

.un-handle-layout-green {
  background: #FFFFFF;
}

.row__title{
  color: #53646f;
  font-weight: bold;
  font-size: 20px;
  margin: 0;
}

.row__text__max{
  color: #53646f;
  font-weight: 400;
  font-size: 25px;
  margin: 0;
}

.row__text__plus{
  color: #53646f;
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}

.row__text__large{
  color: #53646f;
  font-weight: 400;
  font-size: 18px;
  margin: 0;
}

.row__text__primary{
  color: #53646f;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  text-align: center; /* 设置文本居中 */
}

.row__text__green{
  color: #67C23A;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  text-align: center; /* 设置文本居中 */
}

.row__text__small{
  color: #53646f;
  font-weight: 300;
  font-size: 12px;
  margin: 0;
}

.row__text__small__green{
  color: #59b52a;
  font-weight: 350;
  font-size: 13px;
  margin: 0;
}

.row__text__small__red{
  color: #F56C6C;
  font-weight: 350;
  font-size: 13px;
  margin: 0;
}
.vertical-line {
  border-left: 1px solid  #c9c9c9; /* 设置竖线的颜色和粗细 */
  height: 60px; /* 设置竖线的高度 */
  margin: 0 20px; /* 设置竖线与其他内容的间距 */
}

.title-style {
  color: #606266;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 17px;
  border-bottom: 1px solid #ebebeb; /* 设置横线的样式 */
}

.title-style-white {
  color: #606266;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 17px;
  border-bottom: 1px solid #ebebeb; /* 设置横线的样式 */
}

.avatar-box {
  width: 70px;
  height: 70px;
  background: url("@/assets/defaultAvatar.png") no-repeat;
  background-size: 70px 70px;
}

</style>